<script setup lang="ts">
import { ref } from 'vue'
const animal = ref([
  { name: '鹦鹉', id: 1 },
  { name: '乌龟', id: 2 },
  {
    name: '蜥蜴',
    id: 3,
  },
  { name: '泥鳅', id: 4 },
  { name: '蟑螂', id: 5 },
])

const removeItem = index => {
  animal.value.splice(index, 1)
}
</script>
<template>
  <h2>第三页</h2>
  <ul>
    <!-- vue 出于性能考虑
      如果没有给 id。当页面元素发生改变时，默认会使用就地复用的方式 
      给了 id，id 会和元素绑定，id 对应的数据没有了，对应的元素 整个替换
      而不是 就地服用
      vue 开发中有 id就给 id 否则会出现显示问题
      鸿蒙中 id 如非必要可以不给
    -->
    <li v-for="(item, index) in animal" :key="item.id">
      {{ item.name }}
      <input type="text" />
      <button @click="removeItem(index)">删除</button>
    </li>
  </ul>
</template>
<style scoped></style>
